<template>
  <div class="contaienr">
    <div class="list">
      <div class="list-item mb10" v-for="item in commentList" :key="item.id">
        <div class="list-item-header van-hairline--bottom">
          <!-- <div class="list-item-avatar"><img :src="item.avatarUrl" alt=""></div> -->
          <div class="list-item-inner">
            <div class="list-item-name">{{item.userNickName}}</div>
            <div class="list-item-star">
              <!-- <van-rate v-model="item.rate"
                :size="14"
                color="#f44"
                void-icon="star"
                void-color="#eee"
                readonly /> -->
            </div>
          </div>
          <div class="list-item-date">{{item.createTime.split('T')[0]}}</div>
        </div>
        <div class="list-item-content"><p>{{item.content}}</p>
        <!-- <p class="fz12">{{item.property}}</p> -->
        </div>
      </div>
    </div>
    <van-field
      class="reput-button"
      v-model="comment"
      center
      clearable
      :label="user.nickName"
      placeholder="请输入评论"
    >
      <template #button>
        <van-button size="small" type="primary" @click="addComment">发送评论</van-button>
      </template>
    </van-field>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      comment: '',
      commentList: [],
      proId: this.$route.query.id,
      noTips: '您还没有评价信息'
    }
  },
  created() {
    this.getCommentByShop(this.$route.query.id)
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    rate2star(rateValue) {
      let value = 5
      switch (rateValue) {
        case 0:
          value = 1
          break
        case 1:
          value = 3
          break
        case 2:
          value = 5
          break
        default:
          value = 5
      }
      return value
    },
    /**
     * 添加评论
     */
    addComment() {
      const params = {
        userId: this.user.id,
        userNickName: this.user.nickName,
        goodsId: this.proId,
        goodsSerialNumber: this.$route.query.goodsSerialNumber,
        content: this.comment
      }
      this.$api.shop.addComment(params).then(res => {
        if (res.code === 200) {
          this.comment = ''
          this.getCommentByShop(this.proId)
          this.$message({
            type: 'success',
            message: '评价成功~'
          })
        }
      })
    },
    /**
     * 获取当前商品的评论
     */
    getCommentByShop(id) {
      const query = {
        goodsId: id
      }
      this.$api.shop.getCommentByShop(query).then(res => {
        if (res.code === 200) {
          this.commentList = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.contaienr{
  padding-bottom: 60px;
}
.reput-button{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.list-item{
  background:#fff;
  &-avatar{
    width:40px;
    height:40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right:5px;
  }
  &-name{
    font-size: 14px;
    color:#ff703d;
    line-height: 1;
  }
  &-inner{
    flex:1;
    padding-top:4px;
  }
  &-date{
    font-size: 12px;
    color:#999;
  }
  &-header{
    padding:10px 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  &-content{
    padding:10px 15px;
    color:#999;
    font-size: 14px;
  }
}

.no-data {
  font-size: 16px;
  color: #999;
  text-align: center;
  padding-top: 150px;
}
</style>

